<template>
	<view class="brand-area">
		<view class="brand-img-area">
			<image class="brand-img" :src="brandList.list_pic_url" mode="widthFix"></image>
			<view class="brand-img-text">
				{{brandList.name}}
			</view>
		</view>
		<view class="brand-text">
			{{brandList.simple_desc}}
		</view>
	</view>
</template>

<script>
	import {
		ApiBrandDetail
	} from "@/utils/api.js"
	export default {
		data() {
			return {
				brandList: {}
			}
		},
		async onLoad(id) {

			let res = await ApiBrandDetail({
				id: id.id
			})
			if (res.errno === 0) {
				this.brandList = res.data.brand
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: "error"
				})
			}

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.brand-area {
		width: 100vw;
		height: 100vh;
		background-color: #efefef;

		.brand-img-area {
			width: 100%;
			height: 420rpx;
			position: relative;

			.brand-img {
				width: 100%;
				height: 100%;
			}

			.brand-img-text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 40rpx;
				text-decoration: underline
			}
		}

		.brand-text {
			box-sizing: border-box;
			width: 100%;
			height: 236rpx;
			background-color: #fff;
			font-size: 36rpx;
			text-align: center;
			padding: 40rpx 20rpx;
			line-height: 52rpx;
			color: #666
		}
	}
</style>
